<template>
	<view class="">
		<u-sticky><u-tabs :list="list" :is-scroll="false" :current="current" @change="sectionChange"></u-tabs></u-sticky>
		<view class="content wrap1" v-if="current == 0">
			<u-image :showLoading="true" :src="src" width="310px" height="200px"></u-image>
			<u-button type="primary" @click="findMake()">查询已预约情况</u-button>
			<u-form :model="form" ref="uForm"  :rules="rules">
				<u-form-item label="预约类型*" label-width="150">
					<u-radio-group v-model="form.makeType">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in makeTypelist" :key="index" 
							:name="item.name"
						>
						{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				
				<u-form-item label="项目部" label-width="160" left-icon="home">
					<u-input v-model="operateName" type="select" @click="getO()"/>
				</u-form-item>
				
				<u-form-item label="月台*" label-width="150" left-icon="grid">
					<u-radio-group v-model="form.railwayPlatformName">
						<u-radio 
							@change="radioChange1" 
							v-for="(item, index) in railwayPlatformlist" :key="index" 
							:name="item.name"
						>
						{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				
				<u-form-item label="来源地" label-width="150"><u-input v-model="form.v1" type="text" placeholder="请输入来源地"/></u-form-item>
				
				<u-form-item label="车牌号*" label-width="150" left-icon="car" prop="carNumber"><u-input v-model="form.carNumber" type="text" placeholder="请输入车牌号"/></u-form-item>
				
				<u-form-item label="车型*" label-width="150" left-icon="car" prop="carType"><u-input v-model="form.carType" type="text" placeholder="请输入车型"/></u-form-item>
				
				<u-form-item label="姓名*" label-width="150" left-icon="account" prop="driver"><u-input v-model="form.driver" type="text" placeholder="请输入姓名"/></u-form-item>
				
				<u-form-item label="电话*" label-width="150" left-icon="phone" prop="tel"><u-input v-model="form.tel" type="text" placeholder="请输入联系电话"/></u-form-item>
				
				<u-form-item label="体积*" label-width="150" prop="volume"><u-input v-model="form.volume" type="digit" placeholder="请输入体积"/></u-form-item>
				
				<u-form-item label="抵达时间*" label-width="180" left-icon="calendar" prop="arriveTime"><u-input v-model="form.arriveTime" type="select" placeholder="请选择抵达时间" @click="getT()"/></u-form-item>
				
				<u-form-item label="离开时间*" label-width="180" left-icon="calendar" prop="leaveTime"><u-input v-model="form.leaveTime" type="select" placeholder="请选择离开时间" @click="getT2()"/></u-form-item>
				
				<u-form-item label="备注" label-width="150"><u-input v-model="form.notes" type="textarea" placeholder="请输入备注"/></u-form-item>
			</u-form>
			<u-button @click="submit">提交</u-button>
		</view>
		<view>
			<u-select v-model="show2o" :list="olist" @confirm="confirmo"></u-select>
		</view>
		<view>
			<u-select v-model="show2o2" :list="olist" @confirm="confirmo2"></u-select>
		</view>
		<view class=" u-p-r-30 u-p-l-30" v-if="current == 1">
			<view class="content wrap">
				<u-form>
					<u-input v-model="operateName2" placeholder="选择项目" type="select" @click="getO2()"/>
					<u-form-item label="预约日期" label-width="170" left-icon="calendar"><u-input v-model="arriveTime" placeholder="选择日期" type="select" @click="getT3()"/></u-form-item>
				</u-form>
			</view>
		</view>
		<u-card padding="16" v-for="(item,index) in dataList" :key="index" v-if="current == 1">
			<view class="" slot="head">
				<view class="wrap">
					<u-row>
						<u-col span="9" text-align="left">
							<view class="u-line-1 weikaishi2">
								<span>月台：{{item.railwayPlatformName}}</span>
							</view>
						</u-col>
						<u-col span="3" text-align="right" v-if="item.state == '已拒绝'">
							<view class="u-line-1 weikaishi3 yizuofei">
								<span>{{item.state}}</span>
							</view>
						</u-col>
						<u-col span="3" text-align="right" v-else-if="item.state == '进行中'">
							<view class="u-line-1 weikaishi3 jinxingzhong">
								<span>{{item.state}}</span>
							</view>
						</u-col>
						<u-col span="3" text-align="right" v-else-if="item.state == '已完成'">
							<view class="u-line-1 weikaishi3 yiwancheng">
								<span>{{item.state}}</span>
							</view>
						</u-col>
						<u-col span="3" text-align="right" v-else>
							<view class="u-line-1 weikaishi3">
								<span>{{item.state}}</span>
							</view>
						</u-col>
						<u-col span="12" text-align="left" v-if="item.makeType == '提货预约'">
							<view class="u-line-1 weikaishi3 lanse">
								<span>预约类型：{{item.makeType}}</span>
							</view>
						</u-col>
						<u-col span="12" text-align="left" v-else>
							<view class="u-line-1 weikaishi3 jinxingzhong">
								<span>预约类型：{{item.makeType}}</span>
							</view>
						</u-col>
						<u-col span="6" text-align="right">
							<view class="u-line-1 weikaishi3">
								<span>编号：{{item.v2}}</span>
							</view>
						</u-col>
						<u-col span="6" text-align="left">
							<view class="u-line-1 weikaishi3">
								<span>来源地：{{item.v1}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="" slot="body">
				<view class="wrap">
					<u-row>
						<u-col span="6" text-align="left">
							<view class="u-line-1 u-m-t-2">
								<span>车牌号：{{item.carNumber}}</span>
							</view>
						</u-col>
						<u-col span="6" text-align="left">
							<view class="u-line-1 u-m-t-2">
								<span>车型：{{item.carType}}</span>
							</view>
						</u-col>
						<u-col span="6" text-align="left">
							<view class="u-line-1 u-m-t-2">
								<span>司机：{{item.driver}}</span>
							</view>
						</u-col>
						<u-col span="6" text-align="left">
							<view class="u-line-1 u-m-t-2">
								<span>电话：{{item.tel}}</span>
							</view>
						</u-col>
						<u-col span="12" text-align="left">
							<view class="u-line-1 u-m-t-2">
								<span>体积：{{item.volume}}</span>
							</view>
						</u-col>
						<u-col span="12" text-align="left">
							<view class="u-line-1 u-m-t-2">
								<span>抵达时间：{{item.arriveTime}}</span>
							</view>
						</u-col>
						<u-col span="12" text-align="left">
							<view class="u-line-1 u-m-t-2">
								<span>离开时间：{{item.leaveTime}}</span>
							</view>
						</u-col>
						<u-col span="12" text-align="left">
							<view class="u-line-1 u-m-t-2">
								<span>备注：{{item.notes}}</span>
							</view>
						</u-col>
						<u-col span="12" text-align="left">
							<view class="u-line-1 u-m-t-2 ">
								<span>审核备注：</span><span class="yizuofei">{{item.examineNotes}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-card>
		<view>
			<u-picker mode="time" v-model="show" :default-time="endTime" :params="params" @confirm="confirm"></u-picker>
		</view>
		<view>
			<u-picker mode="time" v-model="show2" :default-time="endTime" :params="params" @confirm="confirm2"></u-picker>
		</view>
		<view>
			<u-calendar v-model="show3" mode="date" max-date="2070-01-01" @change="change"></u-calendar>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				flex:'',
				src:'https://www.56linked.com/images/index1/book/p1.png?v=20211118',
				list: [
					{
						name: '新建预约'
					}, 
					{
						name: '我的预约'
					}
				],
				current: 0,
				pageNo: 1,
				hasMore: true,
				orderCount: 0,
				dataList: [],
				operateId:'',
				operateName:'',
				operateId2:'',
				operateName2:'',
				olist:[],
				form:{
				    makeType:'提货预约',
				    railwayPlatformName:"",
					v1:"",
					carId:"",
				    carNumber:"",
					carType:"",
				    driver:"",
				    tel:"",
				    volume:"",
				    arriveTime:"",
				    leaveTime:"",
				    notes:"",
				},
				makeTypelist: [
					{
						name: '提货预约'
					},
					{
						name: '卸货预约'
					}
				],
				railwayPlatformlist:[],
				show:false,
				show2:false,
				show3:false,
				show2o:false,
				show2o2:false,
				endTime:'',
				arriveTime:'',
				
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
			    rules: {
					carType: [
						{ 
							required: true,
							message: '请输入车型', 
							trigger: 'blur',
						}
					],
					carNumber: [
						{ 
							required: true,
							message: '请输入车牌号', 
							trigger: 'blur',
						}
					],
					driver: [
						{ 
							required: true,
							message: '请输入司机', 
							trigger: 'blur',
						}
					],
					tel: [
						{ 
							required: true,
							message: '请输入联系电话', 
							trigger: 'blur',
						}
					],
					volume: [
						{ 
							required: true,
							message: '请输入体积', 
							trigger: 'blur',
						},
						{
							type:'number',
							message: '请输入正确的数据类型', 
							trigger: 'blur'
						}
					],
					arriveTime: [
						{ 
							required: true,
							message: '请选择抵达时间', 
							trigger: 'blur',
						}
					],
					leaveTime: [
						{ 
							required: true,
							message: '请选择离开时间', 
							trigger: 'blur',
						}
					],
				}
			};
		},
		onLoad(open) {
			//#ifdef H5 || APP-PLUS
			this.flex = 'u-flex'
			//#endif
			
			this.refresh()
			
			this.$http.post('/rest/operate/findme',{
			},{
				params: {
				},
				header: {
					'Authorization' :uni.getStorageSync('token'),
				}
			}).then(res => {
				if(res.data.data != '' && res.data.data != null){
					this.operateId = res.data.data.id
					this.operateName = res.data.data.operateName
					this.operateId2 = res.data.data.id
					this.operateName2 = res.data.data.operateName
					
					this.$http.post('/rest/railwayPlatform/getRailwayPlatformList',{
					},{
						params: {operateId:this.operateId},
						header: {
							'Authorization' :uni.getStorageSync('token'),
						}
					}).then(res => {
						if(res.data.data.length>0){
							this.form.railwayPlatformName = res.data.data[0].railwayPlatformName
							for(let item1 of res.data.data) {
								let obj = {}
								obj.name = item1.railwayPlatformName
								this.railwayPlatformlist.push(obj)
							}
						}
					})
				}
			})
			
			this.$http.post('/rest/operate/list3',{
			},{
				params: {},
				header: {
					'Authorization' :uni.getStorageSync('token'),
				}
			}).then(res => {
				for(let item1 of res.data.data) {
					let obj = {}
					obj.value = item1.id
					obj.label = item1.operateName
					this.olist.push(obj)
				}
			})
			
			this.$http.post('/rest/railwayPlatform/getCar',{
			},{
				params: {},
				header: {
					'Authorization' :uni.getStorageSync('token'),
				}
			}).then(res => {
				if(res.data.data != null){
					this.form.carId = res.data.data.id
					this.form.carType = res.data.data.privatecarType
					this.form.carNumber = res.data.data.privatecarCarnumber
					this.form.driver = res.data.data.driver1
					this.form.tel = res.data.data.tel1
				}
			})
		},
		onPullDownRefresh() {
			this.refresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if(this.current == 1){
				uni.showLoading({
					title: '加载中'
				})
				if (this.hasMore) {
					this.pageNo++ 
					setTimeout(() => {
						this.loadOrder({
							arriveTime: this.arriveTime,
							carId: this.form.carId,
							operateId: this.operateId2,
						}).then(res => {})
						uni.hideLoading()
					}, 500)
				} else {
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '已经到低了哦',
							duration: 2000
						});
					}, 500)
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			confirmo2(e) {
				this.operateId2 = e[0].value
				this.operateName2 = e[0].label
				this.refresh()
			},
			getO2(){
				this.show2o2 = true
			},
			confirmo(e) {
				this.operateId = e[0].value
				this.operateName = e[0].label
				this.$http.post('/rest/railwayPlatform/getRailwayPlatformList',{
				},{
					params: {operateId:this.operateId},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					let arr = []
					this.form.railwayPlatformName = ''
					if(res.data.data.length>0){
						this.form.railwayPlatformName = res.data.data[0].railwayPlatformName
						for(let item1 of res.data.data) {
							let obj = {}
							obj.name = item1.railwayPlatformName
							arr.push(obj)
						}
					}
					this.railwayPlatformlist = arr
				})
			},
			getO(){
				this.show2o = true
			},
			findMake(){
				this.$Router.push({ 
					name: 'make_findlist'
				})
			},
			change(e) {
				this.arriveTime = e.result
				this.refresh()
			},
			getT3(){
				this.show3 = true
			},
			refresh(){
				uni.showLoading({
					title: '加载中...'
				})
				if(this.current == 1){
					this.pageNo = 1
					this.hasMore = true
					this.loadOrder({
						arriveTime: this.arriveTime,
						carId: this.form.carId,
						operateId: this.operateId2,
					}).then(res => {
					})
				}
				uni.hideLoading()
			},
			loadOrder(param = {}) {
				return new Promise((resolve, reject) => {
					param = Object.assign(param, {
						page: this.pageNo,
						limit: 10
					})
					this.$http.post('/rest/railwayPlatform/mylist',{
					},{
						params: param,
						header: {
							'Authorization' :uni.getStorageSync('token'),
						}
					}).then(res => {
						if (this.pageNo == 1) {
							this.dataList = res.data.data
						} else {
							this.dataList = this.dataList.concat(res.data.data)
						}
						this.orderCount = res.data.count
						this.hasMore = this.pageNo * 10 < res.data.count
						resolve(res)
					})
				})
			},
			getT(){
				this.show = true
			},
			getT2(){
				this.show2 = true
			},
			confirm(e) {
				this.form.arriveTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			confirm2(e) {
				this.form.leaveTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			// 选中某个单选框时，由radio时触发
			radioChange1(e) {
				console.log(e);
			},
			submit() {
				let that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						if(typeof that.form.railwayPlatformName == 'undefined' || that.form.railwayPlatformName == null || that.form.railwayPlatformName == ""){
							uni.showToast({
								title: "未获取到月台",
								icon: 'none'
							})
							return
						}
						uni.showLoading({
							title: '正在提交'
						})
						this.$http.post('/rest/railwayPlatform/addItem?operateId='+this.operateId,{
						},{
							params: that.form,
							header: {
								'Authorization' :uni.getStorageSync('token'),
							}
						}).then(res => {
							uni.hideLoading()
							if(res.data.code == 200) {
								that.form.volume = ''
								that.form.arriveTime = ''
								that.form.leaveTime = ''
								that.form.notes = ''
								this.refresh()
								this.$refs.uToast.show({
									title: '操作成功',
									type: 'success'
								})
							} else {
								this.$refs.uToast.show({
									title: res.data.message,
									type: 'error'
								})
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			sectionChange(e){
				this.current = e
				this.refresh()
			},
		}
	}
</script>
<style lang="scss">
	page{
			background-color: #ffffff;
	}
	.wrap {
		padding: 15rpx;
	}
	.wrap1 {
		padding: 30rpx;
	}
	.weikaishi2{
		font-size: 36rpx;
	}
	.weikaishi3{
		font-size: 32rpx;
	}
	.huanhang{
		word-break:break-all;
	}
</style>
